<template>
  <el-scrollbar ref="myScrollbar" :wrap-class="{wrapClass: true}">
    <div class="app-container">
      <div class="filter-container">
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item>
            <span style="color: #409EFF;cursor:pointer" @click="juniorUser()">当前公司</span>
          </el-breadcrumb-item>
          <el-breadcrumb-item v-for="(item,key) in breadcrumb">
            <span
              style="color: #409EFF;cursor:pointer"
              @click="juniorUser(item.companyId,item.value,key,2)"
            >{{ item.value }}</span>
          </el-breadcrumb-item>
        </el-breadcrumb>

        <div class="search-div">
          <el-input
            v-model="listQuery.name"
            size="mini"
            placeholder="输入用户名"
            style="width: 150px;"
            class="filter-item"
            clearable
          />
          <date-selector
            v-if="isAlive"
            :size="'mini'"
            v-model="listQuery.validity"
            start-placeholder="有效期开始范围"
            end-placeholder="有效期结束范围"
            style="width: 260px;margin-right: 5px;"
          />

          <el-button
            class="filter-item"
            size="mini"
            icon="el-icon-search"
            type="primary"
            plain
            @click="search">
            {{ $t('table.search') }}
          </el-button>
          <!-- <el-button
            class="filter-item"
            size="mini"
            icon="el-icon-setting"
            type="success"
            plain
            @click="handleCompanyPointsConfig">
            通用积分配置
          </el-button> -->
        </div>
      </div>

      <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        fit
        border
        size="medium"
        :height="listQuery.total>0 ? 'calc(100vh - 225px)' : 'calc(100vh - 180px)'"
        :header-cell-style="{background: '#F2F6FC'}"
      >
        <el-table-column align="center" fixed="left" label="序号" width="50" type="index"/>
        <el-table-column label="公司名" width="155px" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ scope.row.name }}
          </template>
        </el-table-column>
        <el-table-column min-width="110px">
          <template slot="header">
            用户名
            <el-tooltip class="item" effect="dark" content="公司管理员用户名" placement="top">
              <i class="el-icon-question"/>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            {{ showUserName(scope.row.id) }}
          </template>
        </el-table-column>
        <el-table-column min-width="110px">
          <template slot="header">
            用户姓名
            <el-tooltip class="item" effect="dark" content="公司管理员用户姓名" placement="top">
              <i class="el-icon-question"/>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            {{ showTrueName(scope.row.id) }}
          </template>
        </el-table-column>
        <el-table-column label="权限模板" width="110px" show-overflow-tooltip>
          <template slot-scope="scope">
            {{ showRuleName(scope.row.ruleId) }}
          </template>
        </el-table-column>
        <el-table-column width="110px" align="center">
          <template slot="header">
            员工总数
            <el-tooltip class="item" effect="dark" content="公司员工总数" placement="top">
              <i class="el-icon-question"/>
            </el-tooltip>
          </template>
          <template slot-scope="scope">
            {{ showUserTotal(scope.row.id) }}
          </template>
        </el-table-column>
        <el-table-column label="状态" width="80" align="center">
          <template slot-scope="scope">
            <strong v-if="scope.row.state == 1" style="color: #67C23A">启用</strong>
            <strong v-if="scope.row.state == 2" style="color: #F56C6C">禁用</strong>
          </template>
        </el-table-column>
        <el-table-column label="有效期" width="100px" align="center">
          <template slot-scope="scope">
            {{ scope.row.validity }}
          </template>
        </el-table-column>
        <el-table-column label="创建时间" width="155px" align="center">
          <template slot-scope="scope">
            {{ scope.row.createdAt }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          fixed="right"
          prop
          label="操作"
          min-width="250px"
        >
          <template slot-scope="scope">
            <el-button-group>
              <el-button-group>
                <el-button
                  type="info"
                  size="mini"
                  icon="el-icon-d-arrow-right"
                  @click="juniorUser(scope.row.id)"
                >下级信息
                </el-button>
                <el-tooltip class="item" effect="dark" content="公司下员工账户信息" placement="top">
                  <el-button
                    type="primary"
                    size="mini"
                    icon="el-icon-user"
                    @click="viewUser(scope.row.id)"
                  >开户信息
                  </el-button>
                </el-tooltip>
                <el-tooltip class="item" effect="dark" content="积分使用详情" placement="top">
                  <el-button
                    type="success"
                    size="mini"
                    icon="el-icon-money"
                    @click="showPointsDetails(scope.row.id)"
                  >积分详情
                  </el-button>
                </el-tooltip>
              </el-button-group>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="listQuery.total>0"
        :total="listQuery.total"
        :page.sync="listQuery.page"
        :limit.sync="listQuery.limit"
        @pagination="fetchData"
      />
      <employee-page :show.sync="employeeState" :companyId="companyId"/>
      <company-points-config :show.sync="showCompanyPointsConfigVisible"/>
      <company-points-log :show.sync="showPointsDetailsVisible" :companyId="companyId"/>
    </div>
  </el-scrollbar>
</template>
<style scoped>
.app-container {
  min-width: 800px;
}

.search-div {
  margin-top: 10px;
}

.search-div /deep/ .filter-item {
  margin-right: 5px;
}
</style>
<script>
import Pagination from '@/components/Pagination'
import DateSelector from '@/components/Public/dateSelector'
import { getAction } from '@/api/common'
import common from '@/utils/common'
import EmployeePage from '@/views/systemManage/junior/employee'
import CompanyPointsLog from '@/views/systemManage/junior/companyPointsLog'
import CompanyPointsConfig from '@/views/systemManage/junior/companyPointsConfig'

export default {
  name: 'index',
  components: {
    Pagination,
    DateSelector,
    EmployeePage,
    CompanyPointsConfig,
    CompanyPointsLog
  },
  data() {
    return {
      companyId: '',
      listLoading: true,
      list: null,
      breadcrumb: [],
      ruleTemplates: [],
      userList: [],
      userTotal: [],
      listQuery: {
        page: 1,
        total: 0,
        limit: 20,
        companyId: '',
        name: '',
        validity: ''
      },
      isAlive: true,
      employeeState: false,
      showPointsDetailsVisible: false,
      showCompanyPointsConfigVisible: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    async fetchData() {
      this.listLoading = true
      const listQuery = JSON.parse(JSON.stringify(this.listQuery))
      if (listQuery.companyId === '') {
        listQuery.companyId = 0
      }
      // eslint-disable-next-line eqeqeq
      if (listQuery.validity != null && listQuery.validity.length != 0) {
        listQuery.validityStart = listQuery.validity[0]
        listQuery.validityEnd = listQuery.validity[1] + ' 23:59:59'
      }
      const { data } = await getAction(listQuery, 'Junior/GetJuniorList')
      this.list = data.companyData.items
      this.listQuery.total = data.companyData.total
      this.ruleTemplates = data.ruleTemplates
      this.userList = data.userList
      this.userTotal = data.userTotal

      this.listLoading = false
    },
    showUserName(companyId) {
      // eslint-disable-next-line eqeqeq
      if (this.userList[companyId] == undefined) {
        return '用户不存在'
      } else {
        return this.userList[companyId].userName
      }
    },
    showTrueName(companyId) {
      // eslint-disable-next-line eqeqeq
      if (this.userList[companyId] == undefined) {
        return '用户不存在'
      } else {
        return this.userList[companyId].trueName
      }
    },
    showRuleName(ruleId) {
      // eslint-disable-next-line eqeqeq
      if (this.ruleTemplates[ruleId] == undefined) {
        return '模板不存在'
      } else {
        return this.ruleTemplates[ruleId].name
      }
    },
    showUserTotal(companyId) {
      // eslint-disable-next-line eqeqeq
      if (this.userTotal[companyId] == undefined) {
        return '0'
      } else {
        return this.userTotal[companyId].total - 1
      }
    },
    viewUser(companyId) {
      this.companyId = companyId
      this.employeeState = true
    },
    showPointsDetails(companyId){
       this.companyId = companyId
       this.showPointsDetailsVisible = true
    },
    search() {
      this.listQuery.page = 1
      this.fetchData()
    },
    juniorUser(companyId = '', truename = '', key = '', type = 1) {
      // eslint-disable-next-line eqeqeq
      if (companyId == '') {
        this.listQuery.companyId = companyId
        this.breadcrumb = []
        // eslint-disable-next-line eqeqeq
      } else if (type == 1) {
        this.listQuery.companyId = companyId
        this.breadcrumb.push({
          value: this.showTrueName(companyId),
          companyId: companyId
        })
      } else {
        this.listQuery.companyId = companyId
        this.breadcrumb = this.breadcrumb.slice(0, common.numAdd(key, 1))
      }
      this.listQuery.page = 1
      this.listQuery.name = ''
      this.listQuery.validity = ''

      // 重载时间组件
      this.isAlive = false
      this.$nextTick(() => (this.isAlive = true))

      this.fetchData()
    },
    refresh() {
      this.fetchData()
    },
    handleCompanyPointsConfig() {
      this.showCompanyPointsConfigVisible = true
      console.log('handleCompanyPointsConfig')
    }
  }
}
</script>
